import React from "react";
// eslint-disable-next-line
import { Map, fromJS } from "immutable";

// Immutable不可变数据
// 1. 持久化数据结构, 这个变量一旦创建了，就不能再被更改了
//    所有对这个数据的操作，都会返回一个新的数据
// 2. 结构共享, 当一个对象的某一部分发生了改变，那么除了这一部分以外，其他部分的地址不变
const Immutable = () => {
  // 用immutable来创建对象
  // const obj = Map({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(obj);
  // // 获取immutable对象里面的字段的值
  // console.log(obj.get("a"));
  // console.log(obj.get("b"));

  // // 通过set方法来生成一个新的数据
  // const obj2 = obj.set("a", 10);
  // console.log(obj2);

  // const obj3 = obj2.update("a", (v) => v + 1);
  // console.log(obj3);

  // fromJS相当于是递归的Map方法
  const obj = fromJS({
    a: 3,
    b: {
      c: 4,
      d: {
        e: 5,
        f: [1, 2, 3],
      },
    },
  });

  console.log(obj.getIn(["b", "d", "e"]));
  const obj2 = obj.setIn(["b", "d", "e"], 50);
  console.log(obj2);
  const obj3 = obj2.updateIn(["b", "d", "e"], (v) => v + 1);
  console.log(obj3);

  return (
    <>
      <h2>immutable</h2>
    </>
  );
};

export default Immutable;
